<template>
    <transition appear name="side_anime">
        <div>
            <h1>我的信息</h1>

            <!-- 修改个人信息 -->
            <div class="editInfo">
                <el-button type="primary" icon="el-icon-edit" @click="handleUpdate()">修改个人信息</el-button>
                <transition >
                    <el-dialog v-model="updateInfoVisible" title="我的信息">
                        <el-form :inline="true" :model="updateInfoForm" class="demo-form-inline"
                            :rules="rules" ref="updateInfoForm">
                            <el-form-item prop="name">
                                <el-input v-model="updateInfoForm.name" placeholder="姓名" clearable></el-input>
                            </el-form-item>
                            <el-form-item prop="sex">
                                <el-select v-model="updateInfoForm.sex" placeholder="性别" clearable style="width:100%">
                                    <el-option label="男" value="男"></el-option>
                                    <el-option label="女" value="女"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="birth">
                                <el-date-picker
                                    v-model="updateInfoForm.birth"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="选择出生日期">
                                </el-date-picker>
                            </el-form-item>
                            <!-- <el-form-item>
                                <el-input v-model="updateInfoForm.age" placeholder="年龄"></el-input>
                            </el-form-item> -->
                            <el-form-item prop="idno">
                                <el-input v-model="updateInfoForm.idno" placeholder="身份证号" clearable></el-input>
                            </el-form-item>
                            <el-form-item prop="email">
                                <el-input v-model="updateInfoForm.email" placeholder="邮箱" clearable></el-input>
                            </el-form-item>
                            <el-form-item prop="tel">
                                <el-input v-model="updateInfoForm.tel" placeholder="电话" clearable></el-input>
                            </el-form-item>
                            <el-form-item prop="address">
                                <el-input v-model="updateInfoForm.address" placeholder="居住地址" clearable></el-input>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="updateInfoVisible = false">取 消</el-button>
                                <el-button type="primary" @click="updateStaffInfo('updateInfoForm')">保 存</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </transition>
            </div>

            <!-- 个人信息 -->
            <el-descriptions direction="vertical" :column="4" border v-model="staffInfoList">
                <el-descriptions-item label="姓名" value="staffInfoList.name">{{staffInfoList.name}}</el-descriptions-item>
                <el-descriptions-item label="性别" value="staffInfoList.sex">{{staffInfoList.sex}}</el-descriptions-item>
                <el-descriptions-item label="出生年月" value="staffInfoList.birth">{{staffInfoList.birth}}</el-descriptions-item>
                <el-descriptions-item label="年龄" value="staffInfoList.age">{{staffInfoList.age}}</el-descriptions-item>
                <el-descriptions-item label="身份证号" value="staffInfoList.idno">{{staffInfoList.idno}}</el-descriptions-item>
                <el-descriptions-item label="邮箱" value="staffInfoList.email">{{staffInfoList.email}}</el-descriptions-item>
                <el-descriptions-item label="电话" value="staffInfoList.tel">{{staffInfoList.tel}}</el-descriptions-item>
                <el-descriptions-item label="居住地址" value="staffInfoList.address">{{staffInfoList.address}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </transition>
</template>

<script>
import {getInformation} from '../../api/api'
import {updateInformation} from '../../api/api'
export default {
    inject:['reload'],
    data() {
        // 身份证验证
        const checkIDCard = (rule, value, callback) => {
            const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/
            // if (rule.required && !value) {
            //     return callback(new Error('不能为空'))
            // }
            if (value) {
                if (!(IDCardReg.test(value))) {
                    callback(new Error('请输入有效的身份证号'))
                } else {
                    callback()
                }
            }else {
                callback()
            }
        }

        // 设置手机号码的验证规则
        const phone = (rule, value, callback) => {
            const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
            // if (rule.required && !value) {
            //     return callback(new Error('不能为空'))
            // }
            if (value) {
                if (!(reg.test(value))) {
                    callback(new Error('请输入正确的手机号码'))
                } else {
                    callback()
                }
            }else {
                callback()
            }
        }
        // 邮箱
        var email = (rule, value, callback) => {
            const mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
            // if (rule.required && !value) {
            //     return callback(new Error('不能为空'))
            // }
            if (value) {
                if (!(mal.test(value))) {
                    callback(new Error('请输入有效邮箱'))
                } else {
                    callback()
                }
            }else {
                callback()
            }
        }

        return {
            updateInfoForm: {
                name: '',
                sex: '',
                birth: '',
                idno: '',
                email: '',
                tel: '',
                address: ''
            },
            staffInfoList: {
                name: '',
                sex: '',
                birth: '',
                age: '',
                idno: '',
                email: '',
                tel: '',
                address: ''
            },
            staffInfoList:{},
            updateInfoVisible:false,
            
            rules: {
                email: { required: false, validator: email, trigger: 'blur' },
                idno: { required: false, validator: checkIDCard, trigger: 'blur' },
                tel: { required: false, validator: phone, trigger: 'blur' }
            }
        }
    },

    mounted() {
        this.getInfo();
    },

    methods: {
        //获取个人基本信息
        getInfo: function () {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            console.log(token)
            let header = {
                'satoken':token
            }
            getInformation(header).then(response =>{
                console.log('请求成功',response)
                if(response.ret == '0'){
                    this.$store.dispatch("medicalStaff/getInfo",response.userInfo)
                    this.staffInfoList = response.userInfo
                }else {
                    this.$message({
                        message:'获取失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })
        },

        //修该个人基本信息
        handleUpdate() {
            this.updateInfoVisible = true
            console.log(this.$store.state.medicalStaff.staffInfomation);
            this.updateInfoForm.name = this.$store.state.medicalStaff.staffInfomation.name,
            this.updateInfoForm.sex = this.$store.state.medicalStaff.staffInfomation.sex,
            this.updateInfoForm.birth = this.$store.state.medicalStaff.staffInfomation.birth,
            // this.updateInfoForm.age = this.$store.state.medicalStaff.staffInfomation.age,
            this.updateInfoForm.idno = this.$store.state.medicalStaff.staffInfomation.idno,
            this.updateInfoForm.email = this.$store.state.medicalStaff.staffInfomation.email,
            this.updateInfoForm.tel = this.$store.state.medicalStaff.staffInfomation.tel,
            this.updateInfoForm.address = this.$store.state.medicalStaff.staffInfomation.address
        },
        updateStaffInfo(forName) {
            let data = {
                name:this.updateInfoForm.name,
                sex:this.updateInfoForm.sex,
                birth:this.updateInfoForm.birth,
                // age:this.updateInfoForm.age,
                idno:this.updateInfoForm.idno,
                email:this.updateInfoForm.email,
                tel:this.updateInfoForm.tel,
                address:this.updateInfoForm.address
            }
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            // console.log(token)
            let header = {
                'satoken':token
            }
            console.log(data)
            //开启校验
            this.$refs[forName].validate((valid) => {
                if(valid) {
                    updateInformation(data,header).then(response => {
                        console.log('请求成功',response)
                        if (response.ret == '0'){
                            this.updateInfoVisible=false
                            this.$message({
                                message:'修改成功',
                                type: 'success',
                                showClose:true
                            })
                            this.reload()
                        }else{
                            this.$message({
                                message:'修改失败',
                                type: 'error',
                                showClose:true
                            })
                        }
                    })
                }else {
                    return false;
                }
            })
            
        }
    } 
}

</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}

.editInfo {
    text-align: left;
    margin-bottom: 20px;
}
</style>


